<?php $this->regCss('iconfont/iconfont.css') ?>
<?php $this->regCss('mine.css') ?>
<?php $this->regCss('common.css') ?>
<style>
    .checkPay {
        width: 20px;
    }
</style>
<style type="text/css">body{background:#fff!important;}</style>
    <div class="header" style="color: #666">
        <a href="javascript:history.go(-1)"> <i class="iconfont" style="color: #666">󰊒</i></a>
        充值
    </div>
<div class="container " style="padding:0;">
    <p class="selecthe">选择充值面额（元）</p>
    <?php $form = self::beginForm(['showLabel' => false, 'action' => url(['user/pay']), 'id' => 'payform']) ?>
    <div class="boxflex1 paystyle" style="padding: 10px 15px 0;">
        <div class="group_btn clearfloat">
            <div class="btn_re btn_center">
                <a class="btn_money on">500</a>
            </div>
            <div class="btn_re">
                <a class="btn_money">2000</a>
            </div>
            <div class="btn_re">
                <a class="btn_money">5000</a>
            </div>
            <div class="btn_re">
                <a class="btn_money">8000</a>
            </div>
            <div class="btn_re btn_center">
                <a class="btn_money">13888</a>
            </div>
        </div>
        <input type="hidden" id="amount" name="amount" value="500">
        <input type="hidden" id="type" name="type" value="1">
    </div>
    <div class="boxflex1">
        <div class="moneyhead">充值方式</div>
    </div>
    <div class="payType">
        <!--<div class="boxflex1 paystyle checkImg3" style="border-top:0;"  data-type="1">
            <img src="/images/pay.png" style="width: 20px;">
            <span>网银支付</span>
            <img src="/images/seleted.png" alt="" style="float:right;" class="check-paytwo checkPay" >
        </div>-->
        <div class="boxflex1 paystyle checkImg3" style="border-top:0;" data-type="2">
            <img src="/images/icon-chat.png" style="width: 20px;">
            <span>微信扫码</span>
            <img src="/images/seleted.png" alt="" style="float:right;" class="check-paythree checkPay" >
        </div>
        <div class="boxflex1 paystyle checkImg3" style="border-top:0;" data-type="3">
            <img src="/images/qq.png" style="width: 20px;">
            <span>QQ扫码</span>
            <img src="/images/notseleted.png" alt="" style="float:right;" class="check-paythree checkPay" >
        </div>
        <div class="boxflex1 paystyle checkImg3" style="border-top:0;" data-type="4">
            <img src="/images/qq.png" style="width: 20px;">
            <span>QQ H5</span>
            <img src="/images/notseleted.png" alt="" style="float:right;" class="check-paythree checkPay" >
        </div>
        <div class="recharge-btn" id="payBtn">立即充值</div>
    </div>

    <?php self::endForm() ?>
    <div class="row">
    </div>
</div>
<script>
$(function() {
    $('#type').val(2);
    $(".btn_money").click(function() {
        $(".on").removeClass("on");
        $(this).addClass("on");
        $('#amount').val($(this).html());
        
    });

    $('#payBtn').on('click', function(){
        var amount = $('#amount').val();
        if(!amount || isNaN(amount) || amount <= 0){
            alert('金额输入不合法!');
            return false;
        }
            $("#payform").submit();
    });

    $('.payType .paystyle').on('click', function(){
        var type = $(this).data('type');
        $('.payType .paystyle').each(function(){
            if (type == $(this).data('type')) {
                $(this).find('.checkPay').attr({"src":"/images/seleted.png"});
            } else {
                $(this).find('.checkPay').attr({"src":"/images/notseleted.png"});
            }
        });
        $('#type').val(type);
    });
})
</script>
